<script setup>
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    const router = useRouter()

    //获取user数据库
    import useUserStore from '@/stores/user.js'
    const user = useUserStore()

    //获取input填写的数据
    const city = ref('')
    const area = ref('')
    const house = ref('')
    const name = ref('')
    const number = ref('')

    //点击保存按钮对user数据库进行添加地址数据
    const AddAddress = ()=>{
        //创建地址数据库内的对象格式
        const userAdd = {
            name:'',
            phone:'',
            address_text:''
        }
        //对格式进行赋值
        userAdd.name = name.value
        userAdd.phone = number.value
        userAdd.address_text = city.value + ' ' + area.value + house.value 

        //将格式数据对user数据库进行赋值
        user.currentUserInfo.addressList.push(userAdd)
        
        //放回地址页面
        router.go(-1)
    }

    //点击放回按钮放回地址页面
    const goAddress = ()=>{
        router.go(-1)
    }
    
</script>

<template>
  <div class="create_address">
        <div class="create_address_header">
            <span class="iconfont title_back" @click="goAddress">&#xe697;</span>
            <div class="title_text">新建收货地址</div>
            <div class="save" @click="AddAddress">保存</div>
       </div>
        <div class="create_address_form">
            <div class="form_item">
                <div class="form_item_label">所在城市:</div>
                <input type="text" class="form_item_content" placeholder="如北京市" v-model="city">
            </div>
            <div class="form_item">
                <div class="form_item_label">小区/大厦/学校:</div>
                <input type="text" class="form_item_content" placeholder="如理工大学国防科技园" v-model="area">
            </div>
            <div class="form_item">
                <div class="form_item_label">楼号-门牌号:</div>
                <input type="text" class="form_item_content" placeholder="如A号楼B层" v-model="house">
            </div>
            <div class="form_item">
                <div class="form_item_label">收货人:</div>
                <input type="text" class="form_item_content" placeholder="请填写收货人姓名" v-model="name">
            </div>
            <div class="form_item">
                <div class="form_item_label">联系电话:</div>
                <input type="text" class="form_item_content" placeholder="请填写收货手机号" v-model="number">
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.create_address {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: $dark-bgColor;
    overflow-y: scroll;

    &_header {
        padding: .08rem .18rem;
        font-size: .16rem;
        color: $content-fontcolor;
        text-align: center;
        line-height: .24rem;
        background-color: $bgColor;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
    }

    &_form {
        margin-top: .4rem;
        padding: 0 .18rem;
        background-color: $bgColor;
        font-size: .14rem;

        .form_item {
            display: flex;
            padding: .12rem;
            line-height: .2rem;
            border-top: .01rem solid $content-bgColor;

            &_content {
                flex: 1;
                margin-left: .08rem;
                border: none;
                outline: none;
            }
        }
    }
}
</style>